<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="工单详细" :isSearch="false" :isTab="false"></headassy>
	<view class="work-detail" :class="{hidden: show || show2 || show3 }">
		<!-- 内容区域 -->
		<view class="work-detail-content">
			<view class="top">
				<view class="order u-flex-between">
					<view class="left u-flex text-gray">
						工单编号：{{zjWorkorder.workNo}}
					</view>
					<view class="right u-flex">
						<view class="cus-blue-tag mr-5">
							{{zjWorkorder.status}}
						</view>
						<view class="cus-blue-tag">
							{{zjWorkorder.serviceLevel}}
						</view>
					</view>
				</view>
				<view class="phone u-flex">
					<view class="left" style="flex: 1;">
						{{workUserInfo.userName + ' '+ workUserInfo.userPhone}}
					</view>
					<view class="u-flex">
						<!-- <view class="text-blue mr-5" @click="callPhone">
							拨打
						</view> -->
						<!-- <text class="text-orange" @click="handleCopy" selectable="true">
							复制
						</text> -->
						<view class="mr-5" @click="callPhone" style="padding: 10rpx;">
							<u-icon name="phone-fill" color="#27a538" size="38"></u-icon>
						</view>
						<view class="mr-5" @click="handleCopy" style="padding: 10rpx;">
							<u-icon name="file-text" color="#268af0" size="38"></u-icon>
						</view>
						<!-- location -->
					</view>
				</view>
				<view class="address u-flex-between text-gray">
					<view class="left" style="flex: 1;">
						{{workUserInfo.userAddr}}
					</view>
					<view class="right text-blue" @click="getLocal(workUserInfo.userAddr)">
						<!-- 定位 -->
						<uni-icons color="#fd7400" type="location-filled" size="32"></uni-icons>
					</view>
				</view>
			</view>
			<view class="tabs">
				<u-tabs :list="list1" @click="click" lineHeight="6rpx" lineColor="#fd7400" :inactiveStyle="{color: '#000'}"
					:activeStyle="{color: '#fd7400'}" :current="tabIndex" :scrollable="false"></u-tabs>
			</view>
			<view class="main main-mb3">
				<!-- 工单 -->
				<view class="order-form" v-if="tabIndex==0">
					<!-- 服务级别 -->
					<view class="item u-flex">
						<view class="label">
							服务级别
						</view>
						<view class="value" style="display: flex; justify-content: space-between;flex: 1;">
							<view class="" style="">
								{{zjWorkorder.serviceLevel ? zjWorkorder.serviceLevel : ''}}
							</view>
							<view class="cus-oragen-btn" @click="openModel('change_service_Level')">
								修改
							</view>
						</view>
					</view>
					<!-- 受理方式 -->
					<view class="item u-flex">
						<view class="label">
							受理方式
						</view>
						<view class="value" style="display: flex; justify-content: space-between;flex: 1;">
							<view class="" style="">
								{{zjWorkorder.accept ? zjWorkorder.accept : ''}}
							</view>
							<view class="cus-oragen-btn" @click="openModel('change_accept_mode')">
								修改
							</view>
						</view>
					</view>
					<!-- 受理客服 -->
					<view class="item u-flex">
						<view class="label">
							受理客服
						</view>
						<view class="value" style="display: flex; justify-content: space-between;flex: 1;">
							<view class="" style="">
								{{workUserInfo.empName ? workUserInfo.empName : ''}}
							</view>
							<view class="cus-oragen-btn" @click="openModel('change_accept_kf')">
								修改
							</view>
						</view>
					</view>
					<!-- 工单分类 -->
					<view class="item u-flex">
						<view class="label">
							工单分类
						</view>
						<view class="value" style="display: flex; justify-content: space-between;flex: 1;">
							<view class="value">
								{{workUserInfo.name ? workUserInfo.name : ''}}
							</view>
							<!-- <view class="status-blue-btn" @click="show4=true">
								修改
							</view> -->
						</view>
					</view>
					<!-- 处理方式 -->
					<view class="item u-flex">
						<view class="label">
							处理方式
						</view>
						<view class="value" style="display: flex; justify-content: space-between;flex: 1;">
							<view class="value">
								{{workUserInfo.prossName1 ? workUserInfo.prossName1 : ''}}
							</view>
							<!-- <view class="status-blue-btn">
								修改
							</view> -->
						</view>
					</view>
					<!-- 工单内容 -->
					<view class="item u-flex">
						<view class="label">
							工单内容
						</view>
						<view class="value" style="flex: 1;">
							{{zjWorkorder.content ? zjWorkorder.content : ''}}
						</view>
					</view>
					<!-- 工单图片 -->
					<view class="item u-flex">
						<view class="label">
							工单图片
						</view>
						<view class="value mr-5" v-for="(item,index) in imgList" :key="item.id">
							<image :src="item.annex" style="width: 80rpx;height: 80rpx;" @click="previewImg(item)"></image>
							<view class="">
								<!-- {{item.annex}} -->
							</view>
						</view>
					</view>
					<!-- 附加信息 -->
					<view class="text-orange" style="height: 51px; line-height: 51px; padding-left: 18px; background: #f5f5f5;" v-if="this.zdyList.length!=0">
						附加信息
					</view>
					<view class="item u-flex" v-for="(item,index) in zdyList" :key="index">
						<view class="label">
							{{item.fieldKey ? item.fieldKey : ''}}
						</view>
						<!-- 	<view class="value">
							{{item.fieldValue}}
						</view> -->
						<view class="u-flex" v-if="item.fieldType==='多图'">
							<view v-for="(item1,index1) in item.fieldValue" :key="index1">
								<image :src="item1" style="width: 80rpx;height: 80rpx;" class="mr-5"></image>
							</view>
						</view>
						<view class="" v-else>
							{{item.fieldValue ? item.fieldValue : ''}}
						</view>
					</view>
					<!-- 产品 -->
					<view v-for="(item,index) in workProductList" :key="item.id">
						<view class="text-orange"
							style="height: 51px;margin-top: 10rpx;line-height: 51px;padding-left: 18px;">
							产品 {{index+1}}
						</view>
						<view class="item u-flex">
							<view class="label">
								产品编码
							</view>
							<view class="value">
								{{item.code ? item.code : ''}}
							</view>
						</view>
						<view class="item u-flex">
							<view class="label">
								产品信息
							</view>
							<view class="value" style="flex: 1;">
								{{item.brand + ' ' + item.product +' ' + item.specifica}}
							</view>
						</view>
					</view>
				</view>
				<!-- 进展 -->
				<view class="process mt-5" v-else-if="tabIndex===1">
					<view class="card" v-for="(item,index) in workLog" :key="item.id">
						<view class="text-orange mb-10" v-show="index===0">
							最新进展
						</view>
						<view class="title">
							{{item.remark}}
						</view>
						<view class="u-flex-between">
							<view class="text-gray">
								{{item.createTime}}
							</view>
							<view class="text-gray">
								{{item.operator}}
							</view>
						</view>
					</view>
				</view>
				<!-- 备件 -->
				<view class="spare" v-else-if="tabIndex===2">
					<view class="spare-list">
						<view class="card mt-5" v-for="(item,index) in sparelist" :key="item.id" @click="goSpareDetail(item.id)">
							<view class="card-top u-flex-between">
								<view class="left">
									申请编号：{{item.workNo}}
								</view>
								<view class="u-flex-between">
									<view class="cus-blue-tag text-blue mr-5">
										{{item.applyType}}
									</view>
									<view class="cus-blue-tag text-orange">
										{{item.reviewTime}}
									</view>
								</view>
							</view>
							<!-- item -->
							<view class="item u-flex">
								<view class="label">
									备件信息：
								</view>
								<view class="value">
									{{item.pareName}}
								</view>
							</view>
							<view class="item u-flex text-gray">
								<view class="label">
									审核时间：
								</view>
								<view class="value">
									{{item.applyTime}}
								</view>
							</view>
							<view class="item u-flex text-gray">
								<view class="label">
									旧件处理：
								</view>
								<view class="value">
									就地废弃
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 费用 -->
				<view class="spare" v-else-if="tabIndex===4">
					<view class="spare-list">
						<view class="card mt-5" v-for="(item) in moneyList" :key="item.id">
							<view class="card-top u-flex-between">
								<view class="left">
									申请编号：{{item.applyNo}}
								</view>
								<view class="u-flex-between">
									<view class="cus-blue-tag text-blue mr-5">
										{{item.applyType}}
									</view>
									<view class="cus-blue-tag text-orange">
										{{item.applyStatus}}
									</view>
								</view>
							</view>
							<!-- item -->
							<view class="item u-flex">
								<view class="label">
									申请网点：
								</view>
								<view class="value">
									{{item.applicant}}
								</view>
							</view>
							<view class="item u-flex text-gray">
								<view class="label">
									申请时间：
								</view>
								<view class="value">
									{{item.applicationTime}}
								</view>
							</view>
							<view class="item u-flex text-gray">
								<view class="label">
									申请金额：
								</view>
								<view class="value">
									<span>¥</span>
									{{item.applyMoney}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 返厂 -->
				<view class="fc" v-else-if="tabIndex===3">
					<!-- <view class="text-gray">
						没有更多了
					</view> -->
				</view>
				<!-- 结单 -->
				<view class="jd" v-else-if="tabIndex===5">
					<view class="u-flex-between mt-5" style="padding: 15px;background-color: #fff">
						<view class="custom-style" v-if="zjWorkorder.status != '待受理'" @click="urgeOrder">
							催单
						</view>
						<view class="custom-style3" @click="isChangeOrder(false)">
							强制取消工单
						</view>
						<view class="custom-style3" @click="isChangeOrder(true)">
							强制完成工单
						</view>
						<view class="custom-style" v-if="zjWorkorder.status != '待受理'" @click="openModel('end_order')">
							申请结单
						</view>
						<view class="custom-style" @click="openNetwork">
							改派网点
						</view>
					</view>
				</view>
				<view class="example-body" v-if="tabIndex != 5 || tabIndex != 0">
					<uni-load-more :status="status" :content-text="contentText"/>
				</view>
			</view>
		</view>
		<!-- 底部栏 -->
		<view class="footer u-flex-between" v-if="zjWorkorder.status==='处理中' || zjWorkorder.status==='待结单'">
			<view class="u-flex-between" style="width: 100%;">
				<view class="left u-flex">
					<view class="mr-10">
						<button class="custom-style2" @click="changeOrder"> 修改工单</button>
					</view>
					<view>
						<button class="custom-style2" @click="addJz"> 添加进展</button>
					</view>
				</view>
				<view class="right" style="position: relative;">
					<button class="custom-style2" @click="moreApplications">
						<!-- @click="test" -->
						<view class="">
							<view class="" style="display: flex;">
								更多申请
							</view>
							<i class="iconfont icon-xiala moreIcon" :class="{ more: popupVisible }"
								style="position: absolute;top: 0;right: 14px;font-size: 12px; color"></i>
						</view>
					</button>
					<view class="popupMoreTop" v-if="popupVisible" style="font-size: 14px;border: 0;">
						<button class="btn" type="primary" @click="getSpare">申请备件</button>
						<button class="btn" type="primary" @click="getFc">申请返厂</button>
						<button class="btn" type="primary" @click="getMomey">申请费用</button>
						<!-- <button class="btn" type="primary" >改派师傅</button> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 工单分类 -->
		<view @touchmove.stop.prevent="prevent">
			<u-popup :show="show4" @close="show4=false">
				<view>
					<view class="" style="padding: 50rpx 0;text-align: center;font-size: 36rpx;">
						修改工单分类
					</view>
					<view class="" style="">
						<view class="u-flex" style="padding: 28rpx 40rpx;">
							<view class="mr-5" style="font-size: 15px;width: 95px;">
								当前工单分类:
							</view>
							<view class="">
								{{workUserInfo.empName ? workUserInfo.empName : ''}}
							</view>
						</view>
						<view class="u-flex" style="padding: 28rpx 40rpx;">
							<view class="mr-5" style="font-size: 15px;width: 95px;">
								一级分类:
							</view>
							<view style="flex: 1;flex-wrap: wrap;overflow: auto;height: 150rpx;">
								<u-radio-group placement="row" v-for="(item, index) in gdflList" v-model="value1"
									:key="index" icon-size="36" size="36" labelSize="36" @change="groupChange4(item)"
									style="width: 100%;padding-bottom: 10px;">
									<u-radio activeColor="#fd7400" :label="item.title" labelSize="14px"
										:name="item.title" style="width: 100%;" @change="radioChange4(item)"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="u-flex" style="padding: 28rpx 40rpx;">
							<view class="mr-5" style="font-size: 15px;width: 95px;">
								二级分类:
							</view>
							<view style="flex: 1;flex-wrap: wrap;overflow: auto;height: 150rpx;">
								<u-radio-group placement="column" v-for="(item, index) in gdflList2" v-model="value2"
									:key="index" icon-size="36" size="36" labelSize="36" @change="groupChange5(item)"
									style="width: 100%;padding-bottom: 10px;">
									<u-radio activeColor="#fd7400" :label="item.title" labelSize="14px"
										style="width: 100%;" :name="item.title" @change="radioChange5(item)"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="u-flex" style="padding: 86rpx;">
							<view class="w-145">
								<button class="bg-red mr-5" style="color: #fff;border-radius: 4rpx;"
									@click="changeInfo(4)">确认</button>
							</view>
							<view class="w-145">
								<button @click="show4=false">取消</button>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 添加进展,申请结单,选择结单方式,取消工单,更多操作弹窗 -->
		<view>
			<!-- 申请结单 -->
			<view class="" @touchmove.stop.prevent="prevent">
				<u-popup :show="show9" @close="show9=false" :round="20">
					<view class="popup-v" >
						<view class="popup-header">
							<view class="close u-flex" @click="show9=false">
								<u-icon name="close"></u-icon>
							</view>
							<view class="title">
								申请结单
							</view>
						</view>
						<view class="popup-c">
							<view class="edit-form">
								<view class="u-flex form-item">
									<view class="">
										结单方式
									</view>
									<view class="u-flex">
										<view class="text-gray" @click="show10=true">
											{{nameSelectType}}
										</view>
									</view>
								</view>
								<view class="u-flex form-item">
									<view class="">
										处理备注
									</view>
									<input type="text" placeholder="请输入处理备注" v-model="jdremark"></input>
								</view>
							</view>
						</view>
						<view class="footer u-flex">
							<view class="cancel" @click="show9=false">
								取 消
							</view>
							<view class="save">
								<u-button type="primary" :customStyle="orangeBtn" @click="okOrder">
									确 认
								</u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- 选择结单方式 -->
			<view class="">
				<u-popup :show="show10" mode="bottom" @close="show10=false" :round="20">
					<view class="popup-v" >
						<view class="popup-header">
							<view class="close u-flex" @click="show10=false">
								<u-icon name="close"></u-icon>
							</view>
							<view class="title">
								选择结单方式
							</view>
						</view>
						<scroll-view :scroll-y="true" style="max-height: 300px;">
							<view class="bm-list" style="padding: 30rpx;">
								<view class="" v-for="(item,index) in nameType" style="padding: 30rpx;">
									<view class="" @click="selectnameType(item,index)"
										:class="{isActive2:currindex4===index}">
										{{item.name}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="footer u-flex">
							<view class="cancel text-gray" @click="show10=false">
								取消
							</view>
							<view class="save">
								<u-button type="primary" :customStyle="orangeBtn" @click="show10=false">
									确 认
								</u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- 取消工单 -->
			<view class="">
				<u-popup :show="show11" mode="bottom" @close="show10=false" :round="20">
					<view class="popup-v" >
						<view class="popup-header">
							<view class="close u-flex" @click="show11=false">
								<u-icon name="close"></u-icon>
							</view>
							<view class="title">
								取消工单
							</view>
						</view>
						<view class="popup-c">
							<view class="edit-form">

								<view class="u-flex form-item">
									<view class="">
										处理备注
									</view>
									<input type="text" placeholder="请输入处理备注" v-model="cancelRemark"></input>
								</view>
							</view>
						</view>
						<view class="footer u-flex">
							<view class="cancel text-gray" @click="show11=false">
								取消
							</view>
							<view class="save">
								<u-button type="primary" :customStyle="orangeBtn" @click="qxgd">
									确 认
								</u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		
		
		<!-- 更多申请-弹窗 -->
		<custompop
		ref="more-applications-popup"
		ptitle="更多申请"
		:botshow="false"
		@closeclick="closePop">
			<template slot="content" class="more-applications-popup">
				<view class="icon-box" @click="getSpare">
					<view class="icon">
						<u-icon name="file-text-fill" size="50" color="#fd7400"></u-icon>
					</view>
					申请备件
				</view>
				<view class="icon-box" @click="getFc">
					<view class="icon">
						<u-icon name="file-text-fill" size="50" color="#fd7400"></u-icon>
					</view>
					申请返厂
				</view>
				<view class="icon-box" @click="getMomey">
					<view class="icon">
						<u-icon name="rmb-circle-fill" size="50" color="#fd7400"></u-icon>
					</view>
					申请费用
				</view>
			</template>
		</custompop>
		<!-- 修改服务级别-弹窗 -->
		<custompop
			ref="change_service_Level"
			ptitle="修改服务级别"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(levelList)"
			@outputradio="popChangeCall"
			@closeclick="closePop"
		>
		</custompop>
		<!-- 修改受理方式-弹窗 -->
		<custompop
			ref="change_accept_mode"
			ptitle="修改受理方式"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(clfsList)"
			@outputradio="popChangeCall"
			@closeclick="closePop"
		>
		</custompop>
		<!-- 修改受理客服-弹窗 -->
		<custompop
			ref="change_accept_kf"
			ptitle="修改受理客服"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(kfList)"
			@outputradio="popChangeCall"
			@closeclick="closePop"
		>
		</custompop>
		<!-- 添加进展-弹窗 -->
		<custompop
			ref="add-progress"
			ptitle="添加进展"
			@closeclick="closePop"
			@saveclick="addProgress"
		>
			<template slot="content">
				<view class="add-progress">
					<view class="u-flex form-item">
						<view class="">
							工单状态
						</view>
						<view class="u-flex">
							<view class="text-gray" @click="openModel('selsct_distribute_branch')">
								{{logList2}}
							</view>
						</view>
					</view>
					<view style="text-align: left;" class="form-item">
						<view style="margin-bottom: 20rpx;">
							处理备注
						</view>
						<view class="remark">
							<u--textarea maxlength="600" count="true" height="640rpx" placeholder="请输入备注内容" v-model="saveLogList.remark"></u--textarea>
						</view>
					</view>
					<view class="u-flex">
						<u-upload style="height: 74px;width: 74px;" :fileList="fileList" deletable="true" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" width="80rpx" height="80rpx"></u-upload>
					</view>
				</view>
			</template>
		</custompop>
		<!-- 工单状态 -->
		<custompop
			ref="change_accept_kf"
			ptitle="工单状态"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(kfList)"
			@outputradio="popChangeCall"
			@closeclick="closePop"
		>
		</custompop>
		
		<!-- 强制取消（完成）工单 -->
		<custompop
			ref="force-change-order"
			:ptitle="'强制'+orderStatus"
			@closeclick="closePop"
			@saveclick="forceChangeOrder"
		>
			<template slot="content">
				<view class="add-progress">
					<view style="text-align: left;" class="form-item">
						<view style="margin-bottom: 20rpx;">
							处理备注
						</view>
						<view class="remark">
							<u--textarea maxlength="300" count="true" height="400rpx" placeholder="请输入备注内容" v-model="remark"></u--textarea>
						</view>
					</view>
				</view>
			</template>
		</custompop>
		
		<!-- 结单 -->
		<custompop
			ref="end_order"
			ptitle="申请结单"
			@closeclick="closePop"
			@saveclick="okOrder"
		>
			<template slot="content">
				<view class="add-progress">
					<view class="u-flex form-item" @click="openModel('selsct_end_order_way')">
						<view class="">
							结单方式
						</view>
						<view class="u-flex">
							<view class="text-gray" >
								{{endOrderWay == '' ? '请选择结单方式' : endOrderWay}}
							</view>
						</view>
					</view>
					<view style="text-align: left;" class="form-item">
						<view style="margin-bottom: 20rpx;">
							处理备注
						</view>
						<view class="remark">
							<u--textarea maxlength="300" count="true" height="400rpx" placeholder="请输入备注内容" v-model="remark"></u--textarea>
						</view>
					</view>
				</view>
			</template>
		</custompop>
		<!-- 结单方式 -->
		<custompop
			ref="selsct_end_order_way"
			ptitle="结单方式"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(endOrderWayList)"
			@saveRadiovalClick="saveRadiovalClick"
			@closeclick="closePop"
		>
		</custompop>
		<!-- 改派网点 -->
		<custompop
			ref="change_network"
			ptitle="改派网点"
			@closeclick="closePop"
			@saveclick="updateNet"
		>
			<template slot="content">
				<view class="add-progress">
					<view class="u-flex form-item">
						<view class="">
							当前网点
						</view>
						<view class="u-flex">
							<view class="text-gray" >
								{{network.justNetwork == '' ? '无网点' : network.justNetwork}}
							</view>
						</view>
					</view>
					<view class="u-flex form-item" @click="openModel('selsct_network')">
						<view class="">
							改派网点
						</view>
						<view class="u-flex">
							<view class="text-gray" >
								{{network.reassignNetwork == '' ? '请选择网点' : network.reassignNetwork}}
							</view>
						</view>
					</view>
					<view class="u-flex form-item" @click="openModel('selsct_update_network_type')">
						<view class="">
							改派模式
						</view>
						<view class="u-flex">
							<view class="text-gray" >
								{{network.type == '' ? '请选择结单方式' : network.type}}
							</view>
						</view>
					</view>
					<view style="text-align: left;" class="form-item">
						<view style="margin-bottom: 20rpx;">
							处理备注
						</view>
						<view class="remark">
							<u--textarea maxlength="300" count="true" height="400rpx" placeholder="请输入备注内容" v-model="network.applyRemark"></u--textarea>
						</view>
					</view>
				</view>
			</template>
		</custompop>
		<!-- 选择网点 -->
		<custompop
			ref="selsct_network"
			ptitle="选择网点"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(networkList)"
			@saveRadiovalClick="saveRadiovalClick"
			@closeclick="closePop"
		>
		</custompop>
		<!-- 改派模式 -->
		<custompop
			ref="selsct_update_network_type"
			ptitle="改派模式"
			:botshow="false"
			:isselect="true"
			:radioarr="JSON.stringify(updateNetTypeList)"
			@saveRadiovalClick="saveRadiovalClick"
			@closeclick="closePop"
		>
		</custompop>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '工单',
				}, {
					name: '进展',
				}, {
					name: '备件'
				}, {
					name: '返厂'
				}, {
					name: '费用'
				}, {
					name: '结单'
				}],
				
				tabIndex: 0,
				count: 0,
				sparelist: [],
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				custAccId: '',
				workId: '',
				acId: '',
				empId: '',
				workUserInfo: {},
				zjWorkorder: {},
				imgList: [],
				zdyList: [],
				workProductList: [],
				popupVisible: false,
				workLog: [],
				moneyList: [],
				show: false,
				show2: false,
				show3: false,
				show7: false,
				levelList: [],
				levelValue: '',
				moduleId: '',
				clfsList: [],
				clfsValue: '',
				kfList: [],
				show3: false,
				show4: false,
				show5: false,
				kfValue: '',
				gdflList: [],
				gdflList2: [],
				gdflList3: [],
				value1: '',
				value2: '',
				value3: '',
				accept: '',
				show8: false,
				show9: false,
				show10: false,
				acceptServiceName: '',
				acceptServiceId: '',
				saveLogList: {
					type: 2,
					nameType: '',
					remark: '',
					custAccId: '',
					acId: '',
					workId: '',
				},
				logList: [],
				logList2: '',
				logValue: '',
				system: uni.getSystemInfoSync(),
				currindex: -1,
				currindex2: -1,
				currindex3: -1,
				orangeBtn: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: '#fd7400',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px',
					width: '100%'
				},
				nameType: [{
					name: '审核取消'
				}, {
					name: '结单取消'
				}, {
					name: '审核完成'
				}],
				jdremark: '',
				nameSelectType: '请选择',
				currindex4: -1,
				show11: false,
				cancelRemark: '',
				
				
				popShow: false,			// 禁止穿透
				fileList: [],			// 图片
				status: 'loading',		//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				
				orderStatus: '',		// 强制处理的工单状态 已取消/已完成
				endOrderWay: '',		// 结单方式
				endOrderWayList: [],	// 结单方式列表
				
				networkList: [], 		// 网点列表
				updateNetTypeList: [],	// 改派模式列表
				network: {
					type: '',			// 改派模式
					applyRemark: '',	// 备注
					justNetwork: '',	// 原网点
					reassignNetwork: ''	,// 改派后的网点
					applyRemark: '',	// 备注
					newNetId: '',
				},
				
				remark: '',				// 所有弹窗需要输入备注都统一使用这个
			}
		},
		onLoad(e) {
			this.empId = uni.getStorageSync('empId');
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			this.workId = e.workId
			this.getPullRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		// 触底监听
		onReachBottom() {
			if(this.tabIndex == 0 || this.tabIndex == 5) {
				return
			}
			console.log('触底,判断数据余量,更新数据');
			console.log('列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.pageNum);
			if(this.page.pageNum < Math.ceil(this.count / 20)) {
				this.status= 'loading'
				this.page.pageNum++;
				if (this.tabIndex === 1) {
					this.getlogRecord('refresh')
				} else if (this.tabIndex === 2) {
					this.getSpareList('refresh')
				} else if (this.tabIndex === 4) {
					this.getMoneyList('refresh')
				} 
			} else {
				this.status= 'noMore'
			}
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				if(this.popShow) return
				console.clear()
				this.getorderdetail()
				this.getorderdetail2()
				this.getproductInfo()
				this.getproductInfozdy()
				this.findclfs()
				this.findemp()
				this.findworkType();
				
				// 次一级加载
				this.getWorkLevel()
				this.getOrderWay();	
				this.getWdSelect();
				this.getChangeWdType();
				
				setTimeout(()=>{
					uni.stopPullDownRefresh()
				}, 2000)
			},
			// 切换导航栏
			click(item) {
				console.log('item', item);
				this.tabIndex = item.index
				this.page.pageNum = 1;
				this.count = 0;
				this.status= 'loading'
				if (this.tabIndex === 1) {
					this.getlogRecord()
				} else if (this.tabIndex === 2) {
					this.getSpareList()
				} else if(this.tabIndex === 0 || this.tabIndex === 3 || this.tabIndex === 5) {
					this.status= 'noMore'
				} else if (this.tabIndex === 4) {
					this.getMoneyList()
				}
			},
			// 获取工单操作日志
			async getlogRecord(type) {
				const res = await uni.$api.work.getlogRecord({
					id: this.workId
				})
				if(type == 'refresh') {
					this.workLog.push(...res.data)
				}else {
					this.workLog = res.data
				}
				this.status= 'noMore'
				this.count = res.count
				console.log(res, '工单进展列表')
			},
			// 获取备件列表
			async getSpareList(type) {
				const res = await uni.$api.work.getSpareList({
					...this.page,
					custAccId: this.custAccId
				})
				if(type == 'refresh') {
					this.sparelist.push(...res.data)
				}else {
					this.sparelist = res.data
				}
				this.status= 'noMore'
				this.count = res.count
				console.log(res, '工单备件列表')
			},
			// 获取费用审批列表
			async getMoneyList(type) {
				const res = await uni.$api.work.getMoneyList({
					...this.page,
					custAccId: this.custAccId
				})
				if(type == 'refresh') {
					this.moneyList.push(...res.data)
				}else {
					this.moneyList = res.data
				}
				this.status= 'noMore'
				this.count = res.count
				console.log(res, '费用审批列表')
			},
			
			// 获取工单详情信息
			async getorderdetail() {
				const res = await uni.$api.work.getorderdetail({
					id: this.workId
				})
				console.log('获取工单详情', res)
			},
			async getorderdetail2() {
				const res = await uni.$api.work.getorderdetail2({
					id: this.workId,
					acId: this.acId
				})
				console.log('获取工单详情2', res)
				this.workUserInfo = res.data.workUserInfo
				this.zjWorkorder = res.data.zjWorkorder
				this.moduleId = this.zjWorkorder.moduleId
				console.log(this.zjWorkorder, this.moduleId, 'zjWorkorder')
				this.imgList = res.data.annex
				console.log(this.workUserInfo, 'this.workUserInfo')
				console.log(this.imgList, 'this.imgList')
				this.workUserInfo.name = (this.workUserInfo.name ? ('【' + this.workUserInfo.name) + '】 ' : '') + (this.workUserInfo.typeName1 ? (this.workUserInfo.typeName1) : '') + (this.workUserInfo.typeName2 ? ('-' + this.workUserInfo.typeName2) : '')
				this.workUserInfo.prossName1 = (this.workUserInfo.prossName1 ? (this.workUserInfo.prossName1) : '') + (this.workUserInfo.prossName2 ? (',' + this.workUserInfo.prossName2) : '') + (this.workUserInfo.prossName3 ? (',' + this.workUserInfo.prossName3) : '')
				// this.workUserInfo.name = this.workUserInfo.name + ',' + this.workUserInfo.typeName1 + ',' + this.workUserInfo.typeName2
				// this.workUserInfo.prossName1 = this.workUserInfo.prossName1 + ',' + this.workUserInfo.prossName2 + ',' + this.workUserInfo.prossName3
				this.status= 'noMore';
			},
			// 获取产品信息
			async getproductInfo() {
				const res = await uni.$api.work.getproductInfo(this.custAccId, this.workId)
				this.workProductList = res.data.workProductList
				console.log('获取产品信息', this.workProductList)
			},
			// 获取工单详情自定义字段
			async getproductInfozdy() {
				const res = await uni.$api.work.getproductInfozdy(this.workId, {
					type: 1
				})
				this.zdyList = res.data
				console.log(this.zdyList, '自定义字段的接口')
				for (let i = 0; i < this.zdyList.length; i++) {
					if (this.zdyList[i].fieldType === '多图') {
						this.zdyList[i].fieldValue = this.zdyList[i].fieldValue.split(',')
					}
				}
			},
			// 处理结单方式数据
			getOrderWay() {
				this.endOrderWayList = [
					{ischeck: false,label: '审核取消',id:1}, 
					{ischeck: false,label: '结单取消',id:2}, 
					{ischeck: false,label: '工单完成',id:3}
				];
			},
			// 获取网点
			async getWdSelect() {
				const res = await uni.$api.work.findwd({
					custAccId: this.custAccId
				})
				if(res.code == 0) {
					this.networkList = res.data.map((res => {
						res.ischeck = false;
						res.label = res.title;
						return res;
					}));
				}
			},
			// 处理网点派单类型
			getChangeWdType() {
				this.updateNetTypeList = [
					{ischeck: false,label: '审核改派',id:1},
					{ischeck: false,label: '结单改派',id:2}, 
					{ischeck: false,label: '原单改派',id:3}
				]
			},
			
			// 查询工单分类
			async findworkType() {
				const res = await uni.$api.work.findworkType({
					moduleId: 21
				})
				console.log('工单分类', res)
				this.gdflList = res.data
			},
			// 查询工单分类下级
			async findworkTypes(parentid) {
				const res = await uni.$api.work.findworkTypes({
					parentid: parentid
				})
				console.log('工单分类', res)
				this.gdflList2 = res.data
			},
			
			// 跳转备件详情页
			goSpareDetail(id) {
				uni.navigateTo({
					url: '../spare/sparedetail?spareId=' + id,
				})
			},
			
			// 测试跳转申请费用
			test() {
				uni.navigateTo({
					url: '../money/addmoney?workId=' + this.workId
				})
			},
			// 更多申请
			moreApplications() {
				// this.popupVisible = !this.popupVisible
				// this.show7 = true;
				this.openModel('more-applications-popup')
			},
			
			// 拨打电话
			callPhone() {
				wx.makePhoneCall({
					phoneNumber: this.workUserInfo.userPhone
				})
			},
			// 复制功能
			handleCopy() {
				wx.setClipboardData({
					data: this.workUserInfo.userPhone,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: "none",
							mask: "true" //是否设置点击蒙版，防止点击穿透
						})
					}
				})
			},
			// 定位
			getLocal(val) {
				console.log(val)
				const address = val.split('-').join('');
				console.log(address, 'address')
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?address=' + address +
						'&key=78c08202ba8d29c6978f70536f852273',
					success: res => {
						uni.openLocation({
							longitude: Number(res.data.geocodes[0].location.split(',')[0]),
							latitude: Number(res.data.geocodes[0].location.split(',')[1]),
							success: function() {
								console.log('success api', res);
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			
			
			// 添加进展
			addJz() {
				// this.show5 = true
				Object.keys(this.saveLogList).forEach(key => {
					this.saveLogList[key] = key != 'type' ? '' : 2;
				})
				this.openModel('add-progress')
				this.getLog()
			},
			
			// 修改服务级别
			changeLevel() {
				uni.navigateTo({
					url: `/pagesA/pages/worklist/changelevel?oldLevel=${this.zjWorkorder.serviceLevel}`
				})
			},
			// 修改受理方式
			changeaccept() {
				uni.navigateTo({
					url: '/pagesA/pages/worklist/changeaccept'
				})
			},
			// 修改受理客服
			changeemp() {
				uni.navigateTo({
					url: '/pagesA/pages/worklist/changeemp'
				})
			},
			
			// 查询当前-服务级别
			async getWorkLevel() {
				const res = await uni.$api.work.getWorkLevel({
					custAccId: this.custAccId
				})
				console.log('查询服务级别---', res)
				this.levelList = res.data.map(res => {
					res.ischeck = (res.title == this.zjWorkorder.serviceLevel);
					res.label = res.title;
					res.listTypeindex = 1;
					return res;
				})
			},
			// 查询当前-受理方式
			async findclfs() {
				// 处理方式
				// console.log(this.moduleId, 'this.moduleId')
				// const res = await uni.$api.work.findclfs({
				// 	moduleId: 21
				// })
				// 受理方式
				const res = await uni.$api.work.acceptance({
					custAccId: this.custAccId
				})
				console.log('查询受理方式---', res)
				this.clfsList = res.data.map(res => {
					res.ischeck = (res.title == this.zjWorkorder.accept);
					res.label = res.title;
					res.listTypeindex = 2;
					return res;
				})
			},
			// 查询当前-受理客服
			async findemp() {
				const res = await uni.$api.work.findemp({
					custAccId: this.custAccId
				})
				console.log('查询受理客服---', res)
				this.kfList = res.data.map(res => {
					res.ischeck = (res.title == this.workUserInfo.empName);
					res.label = res.title;
					res.listTypeindex = 3;
					return res;
				})
			},
			
			// 弹窗
			popChangeCall(data) {
				this.changePageInfo(data[0].item.listTypeindex,data[0].item.title,data[0].item.id)
			},
			// 更新修改数据
			async changePageInfo(num,name,itemId) {
				let id = this.workId
				let type = num
				switch (num) {
					case 1:
						let dataObj = {
							type: type,
							levelValue: this.levelValue,
							custAccId: this.custAccId,
							serviceLevel: name,
							id: id,
							acId: this.acId
						}
						const res = await uni.$api.work.changeInfo(dataObj)
						console.log(res, '保存成功吗')
						if (res.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show = false
						}
						break;
					case 2:
						let dataObj2 = {
							type: type,
							accept: name,
							custAccId: this.custAccId,
							id: id,
							acId: this.acId
						}
						const res2 = await uni.$api.work.changeInfo(dataObj2)
						console.log(res2, '保存成功吗')
						if (res2.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show2 = false
						}
					case 3:
						let dataObj3 = {
							type: type,
							acceptServiceId: itemId,
							custAccId: this.custAccId,
							id: id,
							acId: this.acId
						}
						const res3 = await uni.$api.work.changeInfo(dataObj3)
						console.log(res3, '保存成功吗')
						if (res3.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show3 = false
						}
					case 4:
						uni.showToast({
							title: '保存成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						this.show4 = false
					default:
						break;
				}
				this.getorderdetail()
				this.getorderdetail2()
			},
			
			groupChange(n) {
				console.log('groupChange', n.title);
				this.levelValue = n.title
			},
			radioChange(n, index) {
				console.log('radioChange', n.title);
				this.levelValue = n.title
				this.currindex = index
			},
			groupChange2(n) {
				console.log('groupChange2', n.title);
				this.accept = n.title
			},
			radioChange2(n, index) {
				console.log('radioChange2', n.title);
				this.accept = n.title
				this.currindex2 = index
			},
			groupChange3(n, index) {
				console.log('groupChange3', n.title, n);
				this.acceptServiceName = n.title
				this.acceptServiceId = n.id
			},
			radioChange3(n, index) {
				console.log('radioChange3', n.title);
				this.acceptServiceName = n.title
				this.acceptServiceId = n.id

				this.currindex3 = index
			},
			groupChange4(n) {
				console.log('groupChange4', n.title, n);
				this.value1 = n.title
				this.findworkTypes(n.id)
			},
			radioChange4(n) {
				console.log('radioChange4', n.title, n);
				this.value1 = n.title
				this.findworkTypes(n.id)
			},
			groupChange5(n) {
				console.log('groupChange4', n.title, n);
				this.value2 = n.title
				this.findworkTypes(n.id)
			},
			radioChange5(n) {
				console.log('radioChange4', n.title, n);
				this.value2 = n.title
				this.findworkTypes(n.id)
			},
			groupChange6(n) {
				console.log('groupChange4', n.title, n);
				this.value3 = n.title
				this.findworkTypes(n.id)
			},
			radioChange6(n) {
				console.log('radioChange4', n.title, n);
				this.value3 = n.title
				this.findworkTypes(n.id)
			},
			
			// 图片预览
			previewImg(e) {
				console.log(e)
				let arr = []
				arr.push(e.annex)
				uni.previewImage({
					current: e.annex,
					urls: arr
				});
			},
			// 申请费用
			getMomey() {
				uni.navigateTo({
					url: '../money/addmoney?workId=' + this.workId
				})
			},
			// 申请备件
			getSpare() {
				uni.navigateTo({
					url: `../spare/newprocess?workId=` + this.workId
				})
			},
			// 申请返厂
			getFc() {
				uni.showToast({
					title: '此功能正在开发当中'
				})
			},
			// 查询添加进展的数据
			async getLog() {
				const res = await uni.$api.work.getLog({
					moduleId: this.moduleId
				})
				this.logList = res.data;
				console.log('查询添加进展---',res)
				if (this.logList = []) {
					// console.log('暂无数据')
					this.logList = [{
						title: '暂无数据'
					}]
					this.logList2 = '暂无数据'
					this.logValue = ''
				}

			},
			// 添加进展
			async addProgress() {
				this.saveLogList.custAccId = this.custAccId;
				this.saveLogList.acId = this.acId;
				this.saveLogList.workId = this.workId;
				// this.saveLogList.annex = this.fileList;
				// this.saveLogList.remark = this.logValue;
				// console.log(this.fileList)
				// this.handleuploadimg(this.fileList[0])
				
				// this.saveLogList.file = formData
				// this.fileList.forEach(res => {
				// 	await imgList.push(this.getArrayBuffer(res.url))
				// })
				
				// console.log(this.saveLogList)
				const res = await uni.$api.work.saveLog(this.saveLogList)
				console.log(res)
				uni.showToast({
					title: '保存成功'
				})
			},
			// 传入临时路径,获取到文件的二进制格式数据.（第二个参数可以传入格式，如base64）
			getArrayBuffer(fileTemppath) {
				return uni.getFileSystemManager().readFileSync(fileTemppath);
			},
			
			// 修改工单
			changeOrder() {
				uni.navigateTo({
					url: `./changeorder?workId=${this.workId}&moduleId=${this.moduleId}`
				})
			},
			// 申请结单
			sqjd() {
				this.show9 = true
			},
			selectnameType(item, index) {
				console.log(item.name)
				this.nameSelectType = item.name
				this.currindex4 = index
			},
			
			async qxgd() {
				let data = {
					custAccId: this.custAccId,
					workId: this.workId,
					acId: this.acId,
					status: '已取消',
					remark: this.cancelRemark
				}
				const res = await uni.$api.work.qzEndOrCancelOrder(data)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.show11 = false
			},
			// 保存修改接口
			async changeInfo(num) {
				let id = this.workId
				let type = num
				let serviceLevel = this.levelValue
				switch (num) {
					case 1:
						let dataObj = {
							type: type,
							levelValue: this.levelValue,
							custAccId: this.custAccId,
							serviceLevel: serviceLevel,
							id: id,
							acId: this.acId
						}
						const res = await uni.$api.work.changeInfo(dataObj)
						console.log(res, '保存成功吗')
						if (res.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show = false
						}
						break;
					case 2:
						let dataObj2 = {
							type: type,
							accept: this.accept,
							custAccId: this.custAccId,
							id: id,
							acId: this.acId
						}
						const res2 = await uni.$api.work.changeInfo(dataObj2)
						console.log(res2, '保存成功吗')
						if (res2.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show2 = false
						}
					case 3:
						let dataObj3 = {
							type: type,
							acceptServiceId: this.acceptServiceId,
							custAccId: this.custAccId,
							id: id,
							acId: this.acId
						}
						const res3 = await uni.$api.work.changeInfo(dataObj3)
						console.log(res3, '保存成功吗')
						if (res3.code === 0) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.show3 = false
						}
					case 4:
						uni.showToast({
							title: '保存成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						this.show4 = false
					default:
						break;
				}
				this.getorderdetail()
				this.getorderdetail2()
			},
			
			// 催单
			async urgeOrder() {
				const res = await uni.$api.work.urgeOrder({
					custAccId: this.custAccId,
					workId: this.workId,
					acId: this.acId,
				})
				if(res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				}else {
					uni.showToast({
						title: '不可催单',
						icon: 'error'
					})
				}
			},
			// 当前需要强制处理工单的状态
			isChangeOrder(bool) {
				this.orderStatus = bool ? '已完成' : '已取消';
				this.openModel('force-change-order');
			},
			// 强制修改工单状态
			async forceChangeOrder() {
				console.log();
				let data = {
					custAccId: this.custAccId,
					workId: this.workId,
					acId: this.acId,
					status: this.orderStatus,
					remark: this.remark
				}
				const res = await uni.$api.work.qzEndOrCancelOrder(data)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			// 结单
			async okOrder() {
				let data = {
					type: '1',
					nameType: this.endOrderWay,
					remark: this.remark,
					custAccId: this.custAccId,
					acId: this.acId,
					workId: this.workId,
					workFieldList: []
				}
				const res = await uni.$api.work.okOrder(data)
				if(res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 打开改派网点弹窗
			openNetwork() {
				// 预处理数据
				this.network.justNetwork = this.workUserInfo.netName;
				this.openModel('change_network');
			},
			// 改派网点
			async updateNet() {
				const res = await uni.$api.work.updateNet(this.custAccId,{
					workId: this.workId,
					acId: this.acId,
					...this.network,
				})
				console.log('改派网点-----',res)
				if(res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			
			// 单选弹窗回调
			saveRadiovalClick(val) {
				console.log(val)
				if(this.popName == 'selsct_end_order_way') {
					this.endOrderWay = val.label;
				}else if(this.popName == 'selsct_network') {
					this.network.reassignNetwork = val.label;
					this.network.newNetId = val.id;
				}else if(this.popName == 'selsct_update_network_type') {
					this.network.type = val.label;
				}
			},
			
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					// 初始化
					this.remark = '';
					this.popName = ref
					this.popShow = true;
					this.$refs[ref].pupshow = true;
				}
			},
			// 关闭弹窗
			closePop() {
				this.popShow = false;
			},
			
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				console.log(lists)
				lists.map((item) => {
					this.fileList.push({
						...item,
					})
				})
			},
			async handleuploadimg(file) {
				// custAccId:this.custAccId
				const res = await uni.$api.work.uploadimg(this.custAccId, {
					filePath: file.url
				})
				console.log('上传图片回调数据----',res);
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	
	.isActive2 {
		color: #fd7400;

	}

	.uni-button:after {
		border: none;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
	}

	.custom-style {
		background-color: #fd7400;
		color: #fff;
		border: 0;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		width: 202rpx;
		border-radius: 4rpx
	}

	.custom-style2 {
		width: 202rpx;
		height: 68rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 68rpx;
		background: #fd7400;
		border-radius: 6rpx
	}

	.custom-style3 {
		background-color: #a6a6a6;
		color: #fff;
		border: 0;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		width: 202rpx;
		border-radius: 4rpx
	}

	.fc {
		text-align: center;
		line-height: 100rpx;
	}

	.jd {
		text-align: center;
		line-height: 100rpx;
	}

	/deep/.u-steps--column {
		padding-left: 22rpx;
	}

	/deep/.u-steps-item__content--column {
		border-bottom: 1px solid #eee;
	}

	/deep/.u-radio__icon-wrap {
		width: 48rpx !important;
		height: 48rpx !important;
	}

	.list-item {
		border-top: solid 1px #f6f6f6;
		line-height: 1.75;
		margin-left: 10px;
		padding: 3px 5px;
	}
	
	.work-detail-content {
		// padding-top: var(--status-bar-height);
		padding: 20rpx 20rpx 0;
		box-sizing: border-box;
	}
	.work-detail {
		font-size: 28rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;

		&.hidden {
			overflow: hidden;
		}

		.top {
			padding: 28rpx 32rpx;
			background: #fff;
			// margin-top: 20rpx;
			border-radius: 10rpx;

			.order {
				padding-bottom: 18px;

				.left {}
			}

			.phone {
				padding-bottom: 6px;

				.left {
					padding-right: 5px
				}
			}

			.address {
				padding-bottom: 7px;
			}
		}

		.tabs {
			background-color: #fff;
			margin-top: 10rpx;
			border-radius: 10rpx;
		}

		.main {
			border-radius: 10rpx;
			background-color: #f5f5f5;
			
			.order-form {
				margin-top: 10rpx;
			}
		}

		.order-form {
			background: #fff;
			margin-top: 10rpx;

			.item {
				padding: 30rpx;
				border-top: solid 1px #f5f5f5;

				.label {
					margin-right: 40rpx;
				}
			}
		}

		.process {

			// background-color: #fff;
			.card {
				padding: 30rpx;
				background-color: #fff;
				margin-bottom: 10rpx;

				.title {
					margin-bottom: 30rpx;
				}
			}
		}

		.footer {
			// background-color: #fff;
			// position: fixed;
			// width: 100%;
			padding: 10px;
			width: 100%;
			box-sizing: border-box;
			// position: fixed;
			// bottom: 0;
			background: #fff;
			border-top: solid 1px #f2f2f2;
			position: fixed;
			bottom: 0;
			height: 100rpx;
		}

		.spare {
			.card {
				padding: 28rpx 32rpx;
				background: #fff;
				line-height: 150%;

				.card-top {
					padding-bottom: 20rpx;
				}
			}

			.item {}
		}

		.moreIcon {
			transition: all 0.4s;
			transform: rotate(180deg);
			color: #f0f0f0;
		}

		.more {
			transform: rotate(360deg);
		}

		.popupMoreTop {
			position: absolute;
			display: flex;
			flex-direction: column;
			bottom: 74rpx;
			left: 0;
			border-radius: 4rpx;
			overflow: hidden;

			.btn {
				border-radius: 0;
				margin-right: 0;
				background: #2386ee;
				border: 0;
				width: 202rpx;
			}
		}

		.btn {
			height: 68rpx;
			line-height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}

	.popup-v {
		// background: #fff;
		// height: calc(100vh - env(safe-area-inset-bottom));

		.footer {
			padding: 30rpx;
			width: 100%;
			justify-content: space-between;
			// position: fixed;
			// bottom: 0;
			background-color: #fff;
			margin-top: 30rpx;
			align-items: center;

			.cancel {
				width: 400rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				font-size: 36rpx;
				color:red
			}

			.save {
				width: 100%;
			}
		}

		.popup-header {
			padding: 30rpx 60rpx;
			display: flex;
			justify-content: center;

			.close {
				width:
					40rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
		}

		.edit-form {
			padding: 60rpx;

			.form-item {
				background-color: #fff;
				justify-content: space-between;
				padding: 30rpx;
				margin-bottom: 30rpx;
				text-align: right;
				border: 1px solid #f5f5f5;
				border-radius: 8rpx;
			}
		}

		.popup-c {
			max-height: 100%;
			overflow: auto;

			.popup-content {
				padding: 0 60rpx 60rpx 60rpx;

				.title {
					margin-bottom: 30rpx;
					border-left: 6rpx solid #fd7400;
					padding: 0 10rpx;

				}

				.tagA {
					text-align: center;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					border-radius: 8rpx;
					background-color: #f5f5f5;
				}
			}


		}
	}
	.more-applications-popup {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 0 40rpx;
		
		.icon-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.icon {
				margin-bottom: 20rpx;
				padding: 16rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}
	}
	
	.add-progress {
		padding: 0 20rpx;
		
		.form-item {
			background-color: #fff;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 30rpx;
			text-align: right;
			border: 1px solid #f1f1f1;
			border-radius: 8rpx;
	
			.remark {
				flex: .9;
				text-align: left;
			}
		}
	}
</style>